<template>
  <div class="page">
    <div class="headers flex jc-sb aic fixed bg-fff">
      <router-link to="/product/list" class="edge flex aic jc-c f14">
        <i class="iconfont icon icon-iconfontjiantouzuo"></i>
        返回
      </router-link>
      <div class="a-headers">商品详情</div>
      <span class="edge"></span>
    </div>
    <!-- <div>
      <img class="pc100" :src="item" v-for="(item,index) in banners" :key="index" />
    </div> -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item, index) in banners" :key="index">
        <img class="pc100 img-a" :src="item"
      /></van-swipe-item>
    </van-swipe>
    <div class="box bg-fff">
      <div class="a-box">
        <span class="b-box f12">直降</span>
        <span class="c-box f12">包邮</span>
        {{ masterName }}
      </div>
      <div class="d-box f14">{{ slaveName }}</div>
      <div class="mt-10 flex jc-sb">
        <span>
          <span class="e-box">￥</span>
          <span class="e-box">{{ maxPrice / 100 }}</span>
          <span class="f-box f12"> ￥{{ maxPrice / 100 }}</span>
        </span>
        <span class="f12 g-box">3932购买</span>
      </div>
      <div class="flex jc-sb h-box f14">
        <div class="fg1"><span class="g-box">规格：X</span>2</div>
        <i class="iconfont icon-youjiantou-"></i>
      </div>
      <div class="flex jc-sb aic l-box f14">
        <div class="flex fdc k-box">
          <span class="i-box f12 lh19">配送至：</span>
          <span class="j-box text f12"
            >上海黄浦区非机动啥假发票感觉到破案机机感觉到破案机机感觉到破案机机机机机构</span
          >
        </div>
        <i class="iconfont icon-youjiantou-"></i>
      </div>
      <div class="m-box">
        <i class="iconfont n-box icon-icon-test3"></i>
        <span class="f12 o-box">包邮</span>
      </div>
    </div>
    <div>
      <div class="bg-fff mt-10">
        <div class="points flex jc-c aic f12">—— 商品详情 ——</div>
      </div>
    </div>
    <div v-for="(item, index) in descPics" :key="index">
      <img class="pc100" :src="item" />
      <div>
        <div class="bg-fff mt-10">
          <div class="points flex jc-c aic f12">—— 预定流程及须知 ——</div>
        </div>
      </div>
      <img class="pc100 bg-fff" src="../../../assets/img/group5.b0b24d0.png" />
    </div>
    <div class="context bg-fff">
      <p class="f12 a-context">一、关于发货</p>
      <p class="f12 b-context">
        个工作日内发出（周末、法定节假日需顺延）个工作日内发出（周末、法定节假日需顺延）；
      </p>
      <p class="f12 a-context">二、关于发货</p>
      <p class="f12 b-context">
        个工作日内发出（周末、法定节假日需顺延）个工作日内发出（周末、法定节假日需顺延）；
      </p>
      <p class="f12 a-context">三、关于发货</p>
      <p class="f12 b-context">
        个工作日内发出（周末、法定节假日需顺延）个工作日内发出（周末、法定节假日需顺延）；
      </p>
      <p class="f12 a-context">四、关于发货</p>
      <p class="f12 b-context">
        个工作日内发出（周末、法定节假日需顺延）个工作日内发出（周末、法定节假日需顺延）；
      </p>
    </div>
    <div class="flex jc-sb fixed bottom">
      <div class="a-bottom flex">
        <a class="flex c-bottom fdc jc-c aic"
          ><i class="iconfont b-c icon-ltsh-icon-xinxi"></i
          ><span class="f12 b-d">客服</span></a
        >
        <a class="flex c-bottom fdc jc-c aic"
          ><i class="iconfont b-b icon-tubiao224"></i
          ><span class="f12 b-z b-d">收藏</span></a
        >
        <router-link to="/cart" class="flex c-bottom fdc jc-c aic">
          <i class="iconfont b-f icon-gouwuche res"></i>
          <span class="abs num" v-if="cartNum > 0">{{ cartNum }}</span>
          <a class="f12 b-d">购物车</a></router-link
        >
      </div>
      <div class="mr-10">
        <a @click="addCart" class="z-bottom f14">加入购物车</a>
        <a @click="submit" class="x-bottom f14 flex jc-c">立即购买</a>
      </div>
    </div>
  </div>
</template>

<script>
import $axios from "@/utils/request";
export default {
  data() {
    return {
      productId: this.$route.params.productId,
      cartNum: 0,
      banners: [],
      descPics: [],
      slaveName: [],
      masterName: [],
      maxPrice: [],
      minPrice: [],
      price:0
    };
  },

  created() {
    this.getList();
  },
  methods: {
    async submit() {
    // debugger
      try {
        
        let data = {
          cartId:this.cartId,
          totalMoney: this.price/100,
        };
        let res = await $axios.post('/preOrder/add',data)
        this.$router.push({
          path: '/submit',
          // query: {preOrderId}
        })
      } catch (error) {
        console.log(error)
      }
    },

    async addCart() {
      //1.发请求到后台
      try {
        let data = { productId: this.productId };
        let res = await $axios.get("/cart/add", data);
        this.cartId = res.result.cartId;
        this.price = res.result.price;
        console.log(res)
        this.cartNum++;
        this.$toast.success("添加成功");
      } catch (error) {
        this.$toast.fail(error);
      }
    },
    async getList() {
      try {
        let data = { productId: this.productId };
        let res = await $axios.get("/product/detail", data);
        console.log(res)
        this.banners = res.result.banners;
        this.masterName = res.result.masterName;
        this.slaveName = res.result.slaveName;
        this.descPics = res.result.descPics;
        this.maxPrice = res.result.maxPrice;
        this.minPrice = res.result.minPrice;
      } catch (error) {
        console.log(error)
      }
    },
    
  },
};
</script>



<style lang="less" scoped>
@import "./detail.less";
.num {
  background: red;
  color: #fff;
  border-radius: 50%;
  top: 0;
  left: 135px;
  padding: 3px;
}
</style>